<template>
  <div>
    <KDialog v-model:showDialog="submitDialog.show">
      <template #header>
        <div style="font-size: 24px; font-family: 'Roboto Slab', serif">
          通知 INFO
        </div>
      </template>
      <div style="padding: 20px;margin-bottom:30px;" align="center">
        <div style="font-size: 20px;border-left: solid 3px var(--mainColor);width:fit-content;padding-left:10px;">你确定要创建吗 ?</div>
      </div>
      <div align="center">
        <button
          style="margin: 10px 10px 10px 10px;"
          class="button primary"
          @click="submitDialog.confirm"
        >
          确定
        </button>
        <button
          style="margin: 10px 10px 10px 10px;"
          class="button"
          @click="submitDialog.show = false"
        >
          取消
        </button>
      </div>
    </KDialog>

    <KCard>
      <template #header>
        <div style="padding: 20px 0 0 0; font-size: 20px">
          <KTitle3>创建小组 Create Group</KTitle3>
        </div>
      </template>
      <section style="padding: 10px 0 20px 0">
        <div>
          <label for="groupName">
            <div class="InputLabel">小组名称 Group Name</div>
            <input
              type="text"
              class="MyInput"
              style="
                margin: 10px;
                width: 50% !important;
                border-radius: 0.5em !important;
              "
              name="groupName"
              v-model="form.groupName"
              placeholder="随便填一个就行"
            />
          </label>
        </div>

        <div>
          <label for="joinPassword">
            <div class="InputLabel">加入密码 Join Password</div>
            <input
              type="text"
              class="MyInput"
              style="
                margin: 10px;
                width: 50% !important;
                border-radius: 0.5em !important;
              "
              name="joinPassword"
              v-model="form.joinPassword"
              placeholder="长度应该限制在8-20之间，只包含数字，小写英文和大写英文"
            />
          </label>
        </div>

        <br />

        <div>
          <label for="joinPassword">
            <div class="InputLabel">备注 DESC (选填)</div>
            <textarea
              name=""
              id=""
              cols="30"
              rows="3"
              v-model="form.desc"
              :style="`resize:${config.textAreaMove ? 'initial' : 'none'}`"
            ></textarea>
          </label>
        </div>

        <br />

        <div style="display: flex">
          <label
            class="InputLabel"
            :style="`font-size: 18px;margin:0 10px 0 0;color:${
              form.allowCreate ? 'var(--mainColor)' : 'black'
            }`"
          >
            允许组员创建作业 Allow
          </label>
          <el-tooltip
            content="勾选此项, 那么你的组员将被允许进行任务创建"
            placement="top"
            effect="dark"
          >
            <el-switch v-model="form.allowCreate" />
          </el-tooltip>
        </div>
      </section>
    </KCard>

    <KBlock lines="2"></KBlock>

    <div class="InputLabel" align="center">
      <button class="button primary" @click="form.handleSubmit">创建 Create</button>
    </div>

    <KBlock lines="3"></KBlock>
  </div>
</template>

<script>
import { reactive } from "vue";
import { ElNotification } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router"

export default {
  name: "NewGroup",
  setup() {
    let store = useStore();
    let router = useRouter();

    let config = reactive({
      textAreaMove : store.state.textAreaMove,
    })

    let form = reactive({
      groupName: "",
      joinPassword: "",
      desc: "",
      allowCreate: false,
      handleSubmit() {
        let name = form.groupName.trim();
        let password = form.joinPassword.trim();
        let desc = form.desc.trim();
        let allowCreate = form.allowCreate;
        if (name.length == 0 || password.length == 0) {
          ElNotification({ title: "Wrong!", message: "您还有必填选项没填" });
          return;
        }
        if (name.includes(" ") || password.includes(" ")) {
          ElNotification({ title: "Wrong!", message: "所填字段不能含有空格！" });
          return
        }
        if (password.length < 8 || password.length > 20) {
          ElNotification({title : "Wrong!", message: "密码长度必须在8-20之间！"})
          return
        }
        if (!/^[0-9a-zA-Z]*?$/g.test(password)) {
          ElNotification({title : "Wrong!", message: "密码只能包含数字、小写英文和大写英文！"})
          return
        }
        submitDialog.show = true;
      },
    });

    let submitDialog = reactive({
      show: false,
      confirm() {
        // TODO : 确认提交表单写在这儿
        let name = form.groupName.trim();
        let password = form.joinPassword.trim();
        let desc = form.desc.trim();
        let allowCreate = form.allowCreate;

        store.dispatch("addGroup", {name, password, desc, allowCreate}).then(function() {
          if (store.state.opSuccess) {
            ElNotification({
              title: "创建成功！",
              message: "接下来去拉你的buddy入伙吧！",
            });
            store.state.opSuccess = undefined
            router.push("/groupcreate")
          }
          else {
            ElNotification({title : "Oops", message: "出错啦！错误原因: " + store.state.error})
          }
          submitDialog.show = false;
        })

        
      },
    });

    return {
      form,
      submitDialog,
      config
    };
  },
};
</script>

<style scoped>
.InputLabel {
  font-size: 18px;
}
</style>